<template>
  <view class="replyWrap">
    <div class="replyWrapTitle">
<!--      回复了您的帖子-->
    </div>
    <view class="replyItem">
      <view class="replyItemTop">
        <view class="replyItemHeadImg">
          <up-image
            :showLoading="true"
            :src="`${env.VITE_OSS_BUCKET}${item.commentingUser?.profileImageUrl}`"
            width="86rpx"
            height="86rpx"
            shape="circle"
          ></up-image>
        </view>
        <view class="replyItemNikeName">
          <view class="title u-line-1">{{item.commentingUser?.userName}}</view>
          <view class="desc">回复了您的帖子 {{filterTime(item.createTimestamp)}}</view>
        </view>
      </view>
      <view class="replyContent1 u-line-1">
        内容回复内容回复内容回复内容回复内容回复内容回复内内容回复内容回复内容回复内容回复内容回复内容回复内
      </view>
      <view class="replyItemCard">
        <view class="myreply">
          我的回复：容回复内容回复内容回复内容回复内容回复容回复内容回复内容回复内容回复内容回复容回复内容回复内容回复内容回复内容回复
        </view>
        <view class="cardBaseData">
          <view class="cardImg">
            <up-image
              :showLoading="true"
              :src="`${env.VITE_OSS_BUCKET}${item.article.images}`"
              width="110rpx"
              height="110rpx"
              bgColor="#FFFFFF"
            ></up-image>
          </view>
          <view class="cardText">
            <view class="title u-line-3">
              {{ item.article.title }}
            </view>
          </view>
        </view>
      </view>
      <view class="replyText">
        <up-image
          :showLoading="true"
          src="/static/images/icon/message.png"
          width="28rpx"
          height="22rpx"
        ></up-image>
        <text decode>&ensp;回复</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, ref } from 'vue';
import {filterTime} from '@/utils/formatTime.js';
import articleManagement from '@/api/articleManagement.js';
export default defineComponent({
  methods: {filterTime},
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  setup(props) {
    articleManagement.getArticleDetail(props.item.articleId).then((res) => {
      console.log("articleDetail", res);
    });
  },
});
</script>

<style lang="scss">
.replyWrap {
  padding-top: 40rpx;
}
.replyItem {
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
}
.replyItemTop {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}
.replyItemHeadImg {
  margin-right: 16rpx;
  margin-left: 30rpx;
}
.replyItemNikeName {
  .title {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 8rpx;
  }
  .desc {
    font-size: 22rpx;
    color: #666;
  }
}
.replyContent1 {
  padding-left: 60rpx;
  padding-right: 32rpx;
  font-size: 26rpx;
  color: #333333;
  margin-bottom: 24rpx;
}
.replyItemCard {
  background-color: #f3f3f3;
  border-radius: 15rpx;
  padding: 30rpx;
  width: 690rpx;
  margin: 0 auto 20rpx;
  display: flex;
  flex-direction: column;
}
.myreply {
  font-size: 26rpx;
  color: #333333;
  margin-bottom: 32rpx;
}
.cardBaseData {
  display: flex;
  align-items: center;
}
.cardImg {
  margin-right: 16rpx;
}
.cardText {
  .title {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 8rpx;
  }
}
.replyText {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 24rpx;
  color: #999999;
  padding: 0 30rpx;
}
</style>
